<template>
    <div class="messageStatusWrapper">
        <template v-if="chat.status==0">
            <LoadingOutlined />
        </template>
        <template v-if="chat.status==-1">
            <div class="fail"><ExclamationOutlined /></div>
        </template>
    </div>
</template>
<script lang="ts" setup>
//导入工具库
import { inject } from 'vue'
//导入组件
import { LoadingOutlined, ExclamationOutlined } from '@ant-design/icons-vue'
//定义属性
const chat = inject('chat', {})
//定义方法
const hanlder = () => {}
//生命周期
</script>
<style lang="less" scoped>
.messageStatusWrapper {
    width: 30px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .fail {
        font-size: 12px;
        width: 20px;
        height: 20px;
        background-color: red;
        font-weight: lighter;
        color: white;
        line-height: 20px;
        text-align: center;
        border-radius: 10px;
        margin-right: 7px;
    }
}
</style>